<!DOCTYPE html>

<html>
	<head>
		<title>Data Entry</title>
		 


		<script>
			var first_index = {};
			var indexedDB = window.indexedDB || window.webkitIndexedDB ||
                      window.mozIndexedDB;
      
      		if ('webkitIndexedDB' in window) {
        		window.IDBTransaction = window.webkitIDBTransaction;
       			window.IDBKeyRange = window.webkitIDBKeyRange;
      		}
			first_index.indexedDB = {};
			first_index.indexedDB.db = null;
			first_index.indexedDB.open= function(){
				console.log("db opened");
				var request = indexedDB.open("laptime","This is a database to store laptimes");
				console.log("db opened finished");
				request.onsuccess = function(e){
					console.log("db opened success");
					var v = "1.0";
					first_index.indexedDB.db = e.target.result;	
					var db = first_index.indexedDB.db;
					if(v!=db.version){
						var setVrequest = db.setVersion(v);
						
						//onsuccess is the only place we can create the Object store
						setVrequest.onfailure = first_index.indexedDB.onerror;
						setVrequest.onsuccess = function(e) {
							var store = db.createObjectStore("laptime",
								{keyPath: "timeStamp"});
							first_index.indexedDB.getAllLapTimes();
						};
					}
					first_index.indexedDB.getAllLapTimes();
				};
				
				request.onfailure = first_index.indexedDB.onerror;
				};
			
			
			
			first_index.indexedDB.addLapTime = function(email,lap_num,lap_time){
				var db = first_index.indexedDB.db;
				var trans = db.transaction(["laptime"],IDBTransaction.READ_WRITE);
				var store = trans.objectStore("laptime");
				var request = store.put({
					"email": email,
					"lap_num": lap_num,
					"lap_time": lap_time,
					"timeStamp": new Date().getTime()
					});
					
				request.onsuccess = function(e)  {
				//Re-render all lap times
					first_index.indexedDB.getAllLapTimes();
				}
				request.onerror = function(e) {
					console.log(e.value);
				};
			};
			
			first_index.indexedDB.getAllLapTimes = function(){
				var lapTimes = document.getElementById("lap_times");
				lapTimes.innerHTML = "";
				
				var db = first_index.indexedDB.db;
				var trans = db.transaction(["laptime"],IDBTransaction.READ_WRITE);
				var store = trans.objectStore("laptime");
				
				//Get everything in the store;
				var keyRange = IDBKeyRange.lowerBound(0);
				var cursorRequest = store.openCursor(keyRange);
				

				cursorRequest.onsuccess = function(e) {
					var result = e.target.result;
					if(!!result == false)
						return;
					renderLapTime(result.value);
					result.continue();
					
				};
				
				cursorRequest.onerror = first_index.indexedDB.onerror;
			};
			
			
			
			
			
			first_index.indexedDB.deleteLapTime = function(id) {
				var db = first_index.indexedDB.db;
				var trans = db.transaction(["laptime"],IDBTransaction.READ_WRITE);
				var store = trans.objectStore("laptime");
				
				var request = store.delete(id);
				
				request.onsuccess = function(e) {
					first_index.indexedDB.getAllLapTimes(); //refresh the screen
				};
				
				request.onerror = function(e) {
					console.log(e);
				};
			};
			
		
			
				
			
			function init() {
				first_index.indexedDB.open(); //open displays the data previously saved
			}
			
			window.addEventListener("DOMContentLoaded",init,false);
			
			function addLapTime(){
				var lapTime = document.getElementById('laptime');
				first_index.indexedDB.addLapTime(lapTime.value);
				lapTime.value='';
			}
			
			function renderLapTime(row){
				console.log("in render times");
				var ele = document.getElementById('lap_times');
				//ele.innerHTML = "";
				ele.innerHTML=ele.innerHTML+ 'TimeStamp: '+ row.timeStamp + ', lap_num: ' + row.lap_num +', lap_time: '+ row.lap_time +', email: '+ row.email +'<a href=\'javascript:first_index.indexedDB.deleteLapTime('+row.timeStamp+')\'>Delete</a>'+' </br>';
				

				
			}
			
			function saveLapTimes(){
				first_index.indexedDB.addLapTime(
				document.getElementById("email").value,
				document.getElementById("lap_num").value,
				document.getElementById("lap_time").value
				);
				
				
				
			}
		</script>
		
	
		
	</head>
	<body >
	<form method="get" id="laptime_form" >
		<div>
			<label>Lap Number</label>
			<input type="number" min="1" value="1" name="lap_num" id="lap_num" size="2" step="1"/>
		</div>
		<div>
			<label>Lap Time</label>
			<input type="number" min="1" value="4" name="lap_time" id="lap_time" size="2" step="1"/>
		</div>
		<div>
			<input type="email" id="email" placeholder="Please enter the email address" size="40" />
		</div>
		
		<div>
			<input type="button" value="Upload Lap Time" onClick="saveLapTimes()" />
		</div>
	</form>
	<div>
		<h2>Lap Times</h2>
		<form id = "filter_previous_scores_form">
			<input type = "email" placeholder="Filter lap times by email address" size = "40" id ="filter_by_email"/> <br/>
			<input type = "submit" value="Filter"/>
		</form>
	</div>
	
	<div id='lap_times'>
	
	</div>
	
	</body>

</html>